<template>
  <div style="padding: 10px">
    <t-card title="物料申购">
      <div style="display: flex">
        <t-form label-align="right" layout="inline" label-width="80px">
          <t-form-item label="工单编号" name="FID">
            <t-input v-model="formData.FID" placeholder="请输入工单编号" />
          </t-form-item>
        </t-form>
        <div style="flex: 1"></div>
        <t-space align="end" style="align-self: flex-end">
          <t-button theme="primary" @click="clickAdd">新增</t-button>
          <t-button theme="primary" @click="clickCancel">取消</t-button>
        </t-space>
      </div>
    </t-card>

    <t-collapse :default-value="[0, 1]">
      <t-collapse-panel header="申购单基础信息">
        <t-form layout="inline">
          <t-row :gutter="12">
            <t-col :span="4">
              <t-form-item label="申购单号" name="FID" style="width: 100%">
                <t-input v-model="formData.FID" placeholder="请输入ID" />
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="申购部门" style="width: 100%">
                <t-select
                  v-model="formData.buy_org"
                  :style="{ width: '322px' }"
                  placeholder="请选择类型"
                  class="demo-select-base"
                  clearable
                >
                  <t-option v-for="(item, index) in organ_list" :key="index" :value="item.value" :label="item.label">
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="需求人员" name="FDocumentStatus" style="width: 100%">
                <t-input v-model="formData.FDocumentStatus" placeholder="请输入数据状态" />
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="需求部门" style="width: 100%">
                <t-select
                  v-model="formData.req_org"
                  :style="{ width: '100%' }"
                  placeholder="请选择类型"
                  class="demo-select-base"
                  clearable
                >
                  <t-option v-for="(item, index) in organ_list" :key="index" :value="item.value" :label="item.label">
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
          </t-row>
        </t-form>
      </t-collapse-panel>

      <t-collapse-panel header="申购详细信息">
        <div style="margin-top: 10px; display: flex; flex-direction: column">
          <!-- <t-space align="end" style="align-self: flex-end">
            <t-button theme="primary" @click="loadData">查询</t-button>
            <t-button variant="outline" theme="primary" @click="clickAdd">新增</t-button>
          </t-space> -->
          <t-table
            row-key="FID"
            :data="dataList"
            :columns="columns"
            :resizable="true"
            :loading="loading"
            :stripe="stripe"
            :selected-row-keys="selectedRowKeys"
            :active-row-type="single"
            :select-on-row-click="true"
            bordered
            :hover="true"
            table-layout="auto"
            size="small"
            :pagination="pagination"
            cell-empty-content="-"
            resizable
            lazy-load
            @select-change="rehandleSelectChange"
            @row-click="handleRowClick"
          >
            <template #index="{ col, row, rowIndex, colIndex }">
              {{ rowIndex + 1 }}
            </template>
            <template #operation="{ row }">
              <t-button theme="primary" hover="color" @click="handleClickEdit(row)"> 编辑 </t-button>
            </template>
          </t-table>
        </div>
      </t-collapse-panel>
    </t-collapse>

    <detail ref="detailRef" @update-data="loadData" />
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import columns from './columns/index';
import { queryMbomList } from '@/service/mbom';
import { queryPbomList } from '@/service/pbom';

import Detail from './components/detail.vue';
import router from '@/router';

export default {
  components: { Detail },
  setup(props) {
    const formData = reactive({});
    // const formData = reactive({ FMATERIALID: 111204, FDocumentStatus: '', FName: '伺服电机' })
    const detailRef = ref();
    const total = ref(300);
    const loading = ref(false);
    const selectedRowKeys = ref([]);
    const route = useRoute();
    const curr_page = ref(1);
    const page_size = ref(10);

    const dataList = ref([]);
    const pagination = computed(() => {
      return {
        defaultCurrent: 1,
        defaultPageSize: page_size.value,
        total: total.value,
        onChange: (pageInfo) => {
          const { current, pageSize } = pageInfo;
          curr_page.value = current;
          page_size.value = pageSize;
          loadData();
        },
      };
    });
    const rehandleSelectChange = (value, { selectedRowData }) => {
      selectedRowKeys.value = value;
      console.log('rehandleSelectChange', selectedRowData);
    };
    const handleRowClick = (e) => {
      console.log(e);
    };

    const handleClickEdit = (row) => {
      // detailRef.value.openModal(row);
      router.push({ name: 'materialEdit', params: { id: row.FMATERIALID } });
    };

    const clickAdd = () => {
      // console.log('detailRef', detailRef);
      // detailRef.value.openModal();
      router.push({ name: 'materialAdd' });
    };
    const clickCancel = () => {
      router.go(-1);
    };

    const loadData = async () => {
      loading.value = true;
      let res = null;
      const fids = route.params.bomIds.split(',');
      if (route.params.isMbom === 'Y') {
        res = await queryMbomList({ FIDS: fids, curr_page: 1, page_size: 500 });
      } else {
        res = await queryPbomList({ FIDS: fids, curr_page: 1, page_size: 500 });
      }
      dataList.value = res.dataList;
      // total.value = res.length;
      total.value = res.total;
      console.log('res', res);
      loading.value = false;
    };

    onMounted(() => {
      loadData();
    });

    return {
      detailRef,
      columns,
      pagination,
      total,
      formData,
      dataList,
      loadData,
      handleClickEdit,
      loading,
      clickAdd,
      handleRowClick,
      curr_page,
      page_size,
      selectedRowKeys,
      rehandleSelectChange,
      clickCancel,
    };
  },
};
</script>
